import React, { useState, useMemo } from 'react';
import { Button } from 'antd';

/**
 * 应用场景：考虑到性能优化，如何在增加苹果手机售出台数是，不执行handleCalc复杂逻辑运算？
 * 解决方案：使用useMemo
 */
export default () => {
  const [miCount, setMiCount] = useState(0);
  const [appleCount, setAppleCount] = useState(0);

  /**
   * @description 计算小米手机当前销售额
   * 这里用useMemo包裹要处理的函数，用法和useEffect类似，会在页面渲染之前执行一次，
   * 相当于componentWillMount生命周期函数，miCount发生变化也相当于有componentWillUpdate
   * useMemo的返回是缓存的变量，即handleCalc不在是函数了，而是一个值
   */
  const handleCalc = useMemo(() => {
    console.log('----进入复杂逻辑----');
    // 真实案例中，会有复杂的计算逻辑，会特别消耗性能
    return miCount * 3980;
  }, [miCount]);

  return (
    <>
      {console.log('----页面渲染----')}
      <div>{`小米手机当前销售额：${handleCalc} 元`}</div>
      <div>
        <span style={{ marginRight: 6 }}>
          {`小米手机当前售出：${miCount} 台`}
        </span>
        <span>
          <Button onClick={() => setMiCount(miCount + 1)}>+1</Button>
        </span>
      </div>
      <div>
        <span style={{ marginRight: 6 }}>
          {`苹果手机当前售出：${appleCount} 台`}
        </span>
        <span>
          <Button onClick={() => setAppleCount(appleCount + 1)}>+1</Button>
        </span>
      </div>
    </>
  );
};
